<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="getSearch(arguments)"></search>
		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
				<Button @click="createfaultCodeShowH">{{ $t('common.New') }}</Button>
				<Button @click="deleteShowChange">{{ $t('common.batchDelete') }}</Button>
				<Button @click="downTemplate">{{ "下载模板" }}</Button>
				<Button @click="importExcelShow">{{ $t('common.Import') }}</Button>
				<Button @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
			</div>
			<!-- 表格 -->
			<div class="tableContent">
				<Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
					:columns="columnsList" ellipsis ref="selection" stripe @on-selection-change="onSelectChange"
					:data="dataArr">
					<template slot-scope="{ row }" slot="action">
						<!-- <span class="operationBtn" @click="createfaultCodeShowH(row, 'check')"
							><i class="iconfont zy-common-chakan"></i>查看</span
						> -->
						<span class="operationBtn" @click="createfaultCodeShowH(row, 'edit')"><i
								class="iconfont zy-common-bianji"></i>
							{{ $t('common.Edit') }}
						</span>
						<span class="operationBtn" @click="deleteOK(row)">
							<i class="iconfont zy-common-shanchu"></i>
							{{ $t('common.Delete') }}
						</span>
					</template>
				</Table>
			</div>
			<!-- 分页 -->
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" :selected="delIds.length" />
				<Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
					@on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
			</div>
		</div>
		<importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState" url="/dms/classification/export"
			@importExcelChange="importExcelChange" />
		<commonModal ref="commonModal"></commonModal>
		<addNewModel ref="addNewModel" @confirm="searchList"></addNewModel>
	</div>
</template>

<script>
import search from '@/components/curd/searchList.vue';
import fileDownload from 'js-file-download';
import importExcelModal from '@/components/importExcelNew.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import commonModal from '@/components/modalTypes/commonModal.vue';
import addNewModel from './modules/addNewModel';

export default {
	name: 'moldClassificationDefinition',
	components: { search, commonModal, addNewModel, importExcelModal },
	mixins: [toggleTableOperation],
	data() {
		return {
			loading: false,
			create: false,
			searchParams: {},
			pageNum: 1,
			pageSize: 10,
			total: 0,
			searchData: [
				{
					title: '工厂名称',
					key: 'factoryCode',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '工装分类名称',
					key: 'classificationName',
				},
				{
					title: '工装属性',
					key: 'equipAttributes',
				},
				{
					title: '是否启用',
					key: 'isEnabled',
					type: 'select',
					dicData: [
						{
							label: '是',
							value: 1,
						},
						{
							label: '否',
							value: 0,
						},
					],
				},
			],
			columns: [
				{
					key: "selection",
					type: "selection",
					width: 60,
					align: "center"
				},
				{
					title: '序号',
					key: 'index',
					width: 80,
					align: 'center',
					render: (h, params) => {
						return h('div', params.row._index + (this.pageNum - 1) * this.pageSize + 1);
					},
				},
				{
					title: '工厂名称',
					key: 'factoryName',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
					sortable: true,
				},

				{
					title: '工装分类编号',
					key: 'classificationCoding',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
					sortable: true,
				},
				{
					title: '工装分类名称',
					key: 'classificationName',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
					sortable: true,
				},
				{
					title: '工装属性',
					key: 'equipAttributes',
					minWidth: 150,
					align: 'center',
					resizable: true,
					tooltip: true,
					sortable: true,
				},
				{
					title: '是否启用',
					key: 'isEnabled',
					minWidth: 150,
					align: 'center',
					resizable: true,
					sortable: true,
					render: (h, params) => {
						return h('div', params.row.notificationMethod == 1 ? '启用' : '禁用');
					},
				},
				{
					title: '备注',
					key: 'remarks',
					minWidth: 150,
					align: 'center',
					resizable: true,
					sortable: true,
				},
				{
					title: '创建人',
					key: 'createName',
					minWidth: 150,
					align: 'center',
					sortable: true,
					resizable: true,
				},
				{
					title: '创建时间',
					key: 'createTime',
					minWidth: 150,
					align: 'center',
					sortable: true,
					resizable: true,
				},
				{
					title: '更新人',
					key: 'updateName',
					minWidth: 150,
					align: 'center',
					sortable: true,
					resizable: true,
				},
				{
					title: '更新时间',
					key: 'updateTime',
					minWidth: 150,
					align: 'center',
					sortable: true,
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					fixed: 'right',
					minWidth: 260,
					align: 'center',
				},
			],
			dataArr: [],
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			selection: [],
			importExcelState: false,
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns);
		this.changeNum();
	},
	methods: {
		getSearch(arg) {
			this.searchParams = JSON.parse(JSON.stringify(arg[0]));
			this.pageNum = 1;
			this.searchList();
		},
		createfaultCodeShowH(row, showType) {
			this.$refs.addNewModel.show(row, showType);
		},
		deleteOK(row) {
			this.$refs.commonModal.showModal({
				title: '删除提醒',
				type: 'warn',
				desc: '是否确认删除？',
				submit: () => {
					this.axios({
						url: '/dms/classification/deleteByIds',
						method: 'delete',
						data: [row.id],
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
						this.searchList();
					});
				},
			});
		},
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			this.axios({
				method: 'post',
				url: '/dms/classification/queryClassificationList',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//导入
		importExcelShow() {
			this.importExcelState = true;
		},
		importExcelChange(val, data) {
			if (val === 'success') {
				this.importExcelState = false;
				this.changeNum();
			} else if (val === 'error') {
				if (data['errorData'].length > 0) {
					this.importExcelErrorShow = true;
					this.getTableColumnsWidth(this.importExcelErrorColumns);
					this.importExcelErrorData = data['errorData'];
				} else {
					this.importExcelState = false;
				}
			} else {
				this.importExcelState = false;
			}
		},
		//导出
		exportTemplateClick() {
			let params = {
				...this.searchParams,
			};

			const filName = '工装分类定义';
			this.axios({
				url: '/dms/classification/export',
				method: 'post',
				data: params,
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		//勾选列表
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item) => {
				myArray.push(item.id);
			});
			this.delIds = myArray;
			if (selection.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		deleteShowChange() {
			if (this.delIds.length === 0) {
				this.$Message.warning({
					content: `${this.$t("common.deleteItems")}`,
					duration: 6,
					closable: true
				});
				return false;
			} else {
				this.deleteShow = true;
			}
		},
		downTemplate() {
			const filName = '工装分类定义';
			this.axios({
				url: '/dms/classification/downloadTemplate',
				method: 'get',
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		}
	},
};
</script>

<style scoped lang="scss"></style>